<template>
  <div class="Score">
    <el-image
      style="width: 100px; height: 100px"
      :src="require('@/assets/Uzi.jpeg')"
      fit="fit"></el-image>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-dark">
        账户: {{ID}}
      </div></el-col>
    </el-row>
    <el-row>
      <el-col :span="24"><div class="grid-content bg-purple-light">
        <div>拥有积分: {{score_existing}}</div>
      </div></el-col>
    </el-row>
  </div></template>

<script>
export default {
  name: 'Score',
  // 后台交互，根据账户来获取其积分
  created () {
    this.ID = localStorage.getItem('userID')
    this.getScore()
  },
  methods: {
    getScore () {
      let that = this
      let xmlhttp = new XMLHttpRequest()
      xmlhttp.open('POST', 'http://127.0.0.1:3100/users/getPoints')
      xmlhttp.setRequestHeader('content-type', 'application/json')
      let data = {id: this.ID}
      console.log(this.ID)
      xmlhttp.onreadystatechange = function (res) {
        console.log(xmlhttp.response)
        if (xmlhttp.readyState === 4) {
          if (xmlhttp.status === 200) {
            that.score_existing = xmlhttp.response
          }
        }
      }
      xmlhttp.send(JSON.stringify(data))
    }
  },
  data () {
    return {
      ID: '',
      stu_picture_src: '@/assets/logo.png',
      customer_name: 'Uzi',
      score_existing: ''
    }
  }
}
</script>

<style scoped>
  .Score{
    width: 50%;
    height: 50%;
    margin: 0 auto;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
</style>
